<template>
  <div class="app-container">
    <a-row :gutter="24">
      <!-- <a-card  :bordered="false" class="card_Content"> -->
        <a-card  :bordered="false" class="card_Content">
        <a-col :span="24" :xs="24">
        <h1>上传安装包资源</h1>
        <a-form
          v-bind="formItemLayout"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          layout="horizontal"
          ref="formRef"
          :model="formState"
          :rules="rules"
          style="padding:0 48px;"
          >
          <!-- style="max-width: 800px" -->
        <a-form-item label="上传安装包">
          <a-upload action="/upload.do" list-type="picture-card">
            <div>
              <PlusOutlined />
              <div style="margin-top: 8px;">上传apk</div>
            </div>
          </a-upload>
          <i class="fr">仅支持上传1个apk包（32位、64位或32位/64位兼容包）；</i>
          </a-form-item>
          
          <a-form-item label="视频标题"  name="title">
            <a-input v-model:value="formState.title" placeholder="请输入20字以内的视频标题" allow-clear show-count
            :maxlength="20" />
          </a-form-item>
          <a-form-item label="封面图" >
            <a-upload action="/upload.do" list-type="picture-card">
              <div>
                <PlusOutlined />
                <div style="margin-top: 8px">点击或者拖拽上传上传apk</div>
              </div>
            </a-upload>
            <i  class="fr">① 请上传1张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片
              ② 支持JPG、PNG格式</i>
          </a-form-item>
          <a-form-item label="游戏视屏">
            <a-upload action="/upload.do" list-type="picture-card">
              <div>
                <PlusOutlined />
                <div style="margin-top: 8px">点击或者拖拽上传</div>
              </div>
            </a-upload>
            <i class="fr">① 请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片
              ② 支持JPG、PNG格式</i>
          </a-form-item>
          <a-form-item label="电子版授权证书（选填）">
            <a-upload action="/upload.do" list-type="picture-card">
              <div>
                <PlusOutlined />
                <div style="margin-top: 8px">点击或者拖拽上传</div>
              </div>
            </a-upload>
            <i class="fr">① 请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片
              ② 支持JPG、PNG格式</i>
          </a-form-item>
          <a-form-item label="资源证明">
            <a-upload action="/upload.do" list-type="picture-card">
              <div>
                <PlusOutlined />
                <div style="margin-top: 8px">点击或者拖拽上传</div>
              </div>
            </a-upload>
            <i class="fr">① 请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片
              ② 支持JPG、PNG格式</i>
          </a-form-item>
          <!-- <a-form-item label="隐私政策">
            <a-checkbox>checkbox</a-checkbox>
          </a-form-item> -->
          <!-- <a-row :gutter="[16,8]">
            <a-form-item label="隐私政策" >
            <a-col :span="8">
              <a-radio value="apple">输入URL</a-radio>
            </a-col>
            <a-col :span="8">
              <a-input allow-clear placeholder="请输入20字以内的视频标题" />
            </a-col>
            <a-col :span="8">
              <i>查看规范</i>
            </a-col>
          </a-form-item>
          </a-row> -->
          <a-form-item label="隐私政策" name="url">
            <a-radio-group v-model:value="formState.type">
              <a-radio value="URL" >输入URL
                <a-input v-model:value="formState.url" placeholder="请输入URL" style="width:120px" allow-clear  />
              </a-radio>
              <a-radio value="text">输入文本内容
                <a-input v-model:value="formState.txt" placeholder="请输入文本内容" style="max-width: 190px;" allow-clear />
              </a-radio>
            </a-radio-group>
            <i>查看规范</i>
          </a-form-item>
          <a-form-item label="发布类型" name="resource">
            <a-radio-group v-model:value="formState.resource">
              <a-radio value="apple">审核通过后立即发布
                <a-input v-model:value="formState.videoTitle" allow-clear style="width: 150px" placeholder="请输入20字以内的视频标题"/>
              </a-radio>
              <a-radio value="pear">定时发布
                <a-date-picker
                  v-model:value="formState.date1"
                  show-time
                  type="date"
                  placeholder="Pick a date"
                  style="width:160px"
                />
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            :wrapperCol="{ span: 24 }"
            style="text-align: center"
          >
            <a-button htmlType="submit" style="margin-right: 16px; background-color: rgba(76, 200, 126, 1);" type="primary" @click="onSave">保存并提交</a-button>
            <a-button style="margin-left: 8px" @click="resetForm">取消保存</a-button>
          </a-form-item>
        </a-form>
      </a-col>
      </a-card>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import {
    // SearchOutlined,
    PlusOutlined,
    UploadOutlined,
    RightOutlined,
    DeleteOutlined,
    CheckCircleTwoTone,
  } from '@ant-design/icons-vue';
const labelCol = {
  span:6,
  // style: {
  //   width: '150px',
  // },
};
const wrapperCol1 = {
    xs: { span: 4 }, //<576px时，input提示占比,也就是input的宽度
    sm: { span: 6 }, //>=576px时，input提示占比,也就是input的宽度
};
const wrapperCol = {
  span: 18,
};
const formRef = ref()
const formState = reactive({
  title: '',
  date1: undefined,
  resource: '',
  type:undefined,
  url:'',
  txt:'',
  resource:'',
  videoTitle:''
  // delivery: false,
  // type: [],
});
const rules = {
  title: [
    {
      required: true,
      message: 'Please input Activity title',
      trigger: 'change',
    },
    {
      min: 3,
      max: 5,
      message: 'Length should be 3 to 5',
      trigger: 'blur',
    },
  ],
}
const radioValue1 = ref('URL');
const radioValue = ref('apple');
const options = reactive([
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
      },
    ],
  },
]);
const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 8,
  },
};
const formTailLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 14,
    offset: 4,
  },
};

const onSave=() => {
  formRef.value.validate().then(()=>{
    console.log('values',formState,toRaw(formState));
  })
  console.log(formState,1111);
}
const resetForm = () => {
  formRef.value.resetFields();
  formState.type = undefined
};


</script>

<style lang="less" scoped>
.app-container{
  width: 100%;
  padding: 15px;
  background: #ececec;
}
.card_Content{
  width: 100%;
  padding-left: 120px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #3C3C3C;
  h1{
    height: 48px;
    text-align: center;
    font-weight:bolder;
  }
}
:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select){
  width: 120px !important;
  height: 120px !important;
}
.fr {
  display: block;
  // float: left;
  margin-top: -40px;
  margin-left:140px;
  width: 400px;
  height: 40px;
  // word-wrap:break-word; 
  white-space: pre-wrap;
  // overflow: hidden;/*这个参数根据需求来决定要不要*/
  // font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.margin24{
  margin-right: 24px;
}
.footer_content{
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>